import {Modal} from 'antd';
import {Circle, InfoWindow, Map, NavigationControl, Polyline} from "react-bmap";
import React from 'react';
import {ts2time} from "../../utils/utils";


class ModalBigMap extends React.Component {
  state = {
    infoWindowPosition: null,
    infoWindowText: '',
  };

  handleMouseOver(self, info) {
    const {lng, lat, device_id, client_log_time, battery_level} = info;
    const infoWindowText = `
         <dl>
          <dt>设备序列号:</dt>
            <dd>${device_id}</dd>
          <dt>电量:</dt>
            <dd>${battery_level} %</dd> 
          <dt>时间:</dt>
            <dd>${ts2time(client_log_time)}</dd>
          <dt>坐标:</dt>
            <dd>${lng}, ${lat}</dd>
        </dl>
      `;
    const infoWindowPosition = {lng, lat};
    self.setState({infoWindowPosition, infoWindowText})
  }

  render() {
    const {pointPosition, visible, onClose, reportData, index} = this.props;
    const {infoWindowPosition, infoWindowText} = this.state;
    // const {paths, info} = getComputedData(reportData, index)
    const self = this;
    return (
      <div>
        <Modal
          title={`坐标: ${pointPosition !== null && Object.values(pointPosition).join(', ')}`}
          visible={visible}
          // onOk={onClose}
          destroyOnClose={true}
          onCancel={onClose}
          footer={null}
        >
          <Map center={pointPosition} zoom="15" enableScrollWheelZoom={true}>
            <Polyline
              strokeColor='green'
              path={reportData}
            />
            <Circle
              center={pointPosition}
              strokeColor='red'
              fillColor='red'
              radius="30"
              events={{
                click: () => {
                  self.handleMouseOver(self, reportData[index])
                }
              }}
            />
            {infoWindowPosition && (
              <InfoWindow position={infoWindowPosition} text={infoWindowText}
                          width={300} height={0}/>
            )}
            <NavigationControl/>
          </Map>
        </Modal>
      </div>
    );
  }
}

export default ModalBigMap;
